<template>
  <div class="notice">
    <div class="notice-title">{{content.title}}</div>
    <div class="notice-tips">{{content.tip}}</div>
  </div>
</template>

<script>
export default {
  computed: {
    reason() {
      return this.$route.params.reason;
    },
    notice() {
      return {
        login: {
          title: "该功能需要登录",
          tip: "默认密码：appapp",
        },
        todo: {
          title: "该功能尚未完成",
          tip: "Comming soon...",
        },
      };
    },
    content() {
      return this.notice[this.reason];
    },
  },
};
</script>

<style scoped>
.notice {
  display: grid;
  height: calc((100vh - 100px) * 0.9);
  align-content: center;
}
.notice-title {
  font-size: 3vw;
  text-align: center;
  padding: 12px 0;
}
.notice-tips {
  font-size: 1.5vw;
  text-align: center;
  padding: 12px 0;
}
</style>